<template>
  <div style="display: flex;align-items: center;justify-content: center;background-color: cadetblue;height: 100vh">
    <div style="display: flex;background-color: white;width: 50%;overflow: hidden;border-radius: 5px;opacity:0.9">
      <div style="flex: 1;display: flex;justify-items: center;justify-items: center;">
        <img src="@/assets/login.png" style="width: 100%;">
      </div>
      <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
        <el-form :model="user" :rules="rules" ref="loginRef" style="width: 80%">
          <div style="font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px">欢迎登陆后台管理系统</div>
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入用户名" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item prop="validCode">
            <div style="display: flex">
              <el-input prefix-icon="el-icon-camera" size="medium" style="flex: 1" placeholder="请输入验证码" v-model="user.validCode"></el-input>
              <div style="flex: 1;height: 36px"><valid-code @update:value="getCode"/></div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="login">登 陆</el-button>
          </el-form-item>
          <el-form-item>
            <div style="display: flex;">
              <div style="flex: 1">
                还没帐号?请<span @click="$router.push('/register')" style="color: #1890ff;cursor: pointer">注册</span>
              </div>
              <div style="flex: 1;text-align: right">
                <span @click="handleColse" style="color: #1890ff;cursor: pointer;">忘记密码</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
<!--   弹出框忘记密码-->
    <el-dialog
        title="忘记密码"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <div style="display: flex;justify-content: center;align-items: center">
        <el-form :model="resetUser" :rules="rulesPassword" ref="passwordRef" style="width: 80%;" label-width="80px">
          <el-form-item prop="username" label="用户名">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入用户名" v-model="resetUser.username"></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="手机号码">
            <el-input prefix-icon="el-icon-phone" size="medium"  placeholder="请输入手机号码" v-model="resetUser.phone"></el-input>
          </el-form-item>
        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleColse">取 消</el-button>
          <el-button type="primary" @click="handleOk">确 定</el-button>
        </span>
    </el-dialog>
  </div>

</template>

<script>
import ValidCode from "@/components/ValidCode";

export default {
  name: "Login",
  components:{
    ValidCode
  },
  data(){
    const validCode= (rule, value, callback)=>{
      if (value === ''){
        callback(new Error('请输入验证码'));
      }else if(value.toLowerCase() !== this.code){
        callback(new Error('验证码输入不正确'));
      }else {
        callback()
      }
    }
    return{
      resetUser:{},
      dialogVisible:false,
      code:'',
      user:{
        username:'',
        password:'',
        validCode:''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        validCode:[{ validator: validCode, trigger: 'blur' }]
      },
      rulesPassword:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
        ]
      }
    }
  },
  methods:{
    handleOk(){
      this.$refs["passwordRef"].validate(valid=>{
        if (valid){
          this.$request.post("/resetPassword",this.resetUser).then(res=>{
            if (res.code==="200"){
              this.$message.success("重置密码成功")
              this.resetUser={}
              this.dialogVisible=!this.dialogVisible
            }else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    handleColse(){
      this.resetUser={}
      this.dialogVisible=!this.dialogVisible
    },
    getCode(code){
      this.code=code.toLowerCase()
    },
    login(){
      this.$refs["loginRef"].validate((valid) => {
        if (valid) {
          this.$request.post("/login",this.user).then(res=>{
            console.log(res)

            if (res.code === '200'){
              localStorage.setItem('user',JSON.stringify(res.data))
              this.$router.push("/home")
              this.$message.success("登陆成功")
            }else {
              this.$message.error(res.msg)
            }
          },error=>{
            console.log(error)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>